<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="../../../js/class/vue.min.js"></script>
	</head>
	<body>
		<div id="vue-app">
			<p>Original message: "{{ message }}"</p>
			<p>Computed reversed message: "{{ reversedMessage }}"</p>
			<p>Computed reversed message: "{{ reversedMessage2() }}"</p>
		</div>
		<script type="text/javascript">
			
			"use strict"
			var vm = new Vue({
				el:"#vue-app",
				data:{
					message: "Hello",
				},
				computed:{
					//计算属性的 getter
					reversedMessage : function(){
						return this.message.split("").reverse().join("");
					},
					//然而这种的并非是相应依赖,因为Date.now()不是相应式依赖.
					now: function(){
						return Date.now();
					},
				},
				methods:{
					reversedMessage2: function(){
						return this.message.split("").reverse().join("");
					},
					
				},
				
				//#计算属性缓存 vs 方法
				
				/* 我们可以将同一函数定义为一个方法而不是一个计算属性。
				两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。
				只在相关响应式依赖发生改变时它们才会重新求值。
				
				重：这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。 */
				
				/* 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

				我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。
				然后我们可能有其他的计算属性依赖于 A 。
				如果没有缓存，我们将不可避免的多次执行 A 的 getter！
				如果你不希望有缓存，请用方法来替代。 */
				
				watch: {
					
				}
				
				//#计算属性 vs 侦听属性
				
				
			})
			
			/*注： 如果是实时更新 message的话，computed中与其相关的函数或数据也会实时更新。
			 */
		</script>
	</body>
</html>